<template>
	<view :class="['contanier', 'contanier-rich', isWeixinBrowser ? 'contanier-default-open' : '']">
		<image class="logo" src="../../static/shareImg1.png" mode="aspectFit"></image>
		<view class="top">
			<image :src="imgs" class="imgs" mode="aspectFit"></image>
			<view class="text">
				<text class="text1">你的好友正在RICH购上免费拿礼品！</text>
				<text class="text1">还差{{price}}元即可踢脚成功免费拿！</text>
				<text class="text1">就差你的临门一脚了</text>
			</view>
			<view class="helpCut" @click="helpFriendCut">
				<image class="img_foot" src="../../static/share/cut.png" mode="aspectFit"
					style="width: 50rpx;height: 50rpx;margin-right:5rpx">
				</image>
				<view class="ti">帮好友踢一脚</view>
			</view>

		</view>

		<view class="button" v-if="isShowDownSta">
			<u-button :ripple="true" type="primary" @click="download('ios')">
				<u-icon name="apple-fill"></u-icon>
				iPhone下载
			</u-button>
			<u-button :ripple="true" type="primary" @click="download('android')">
				<u-icon name="android-fill"></u-icon>
				Android下载
			</u-button>
		</view>

		<view class="fire" v-if="fireworkSta">
			<image @click="toCutDetailPage" class="new_img" mode="aspectFit"
				src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/c59ee02a57714197ba0316bc3627f325.png"></image>
			<image @click="quxiaoShare" class="quxiao" src="../../static/share/quxiao.png" mode="aspectFit"
				style="width: 70rpx;height: 70rpx;margin-right:5rpx"></image>
			<view class="cut_price" :text="popText">{{popText}}</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserId
	} from '@/utils';
	export default {
		data() {
			return {
				price:'',
				imgs: '',
				popText: '帮踢了99.99元',
				fireworkSta: false,
				helpKanPrice: '',
				userIp: '',
				prizeId: '', //砍价商品链接
				prizeUid: '', //砍价商品发起人的uid
				isShowDownSta:false,//是否要显示下载的按钮
				isWeixinBrowser: false,
				//iosapp下载链接集合和安卓app下载链接集合，租户ios上架后已经安卓包上传到对应的oss后，把连个链接拿来，同时在h5我的页面，下载按钮解开限制
				iosLink: {
					rich: 'https://apps.apple.com/us/app/Rich购-先享后付/id6499086811'
				},
				androidLink: {
					rich: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/Rich.apk'
				}
			};
		},
		onLoad(e) {
			console.log('--app上帮砍人==', e);
			this.prizeId = e.prizeId
			this.prizeUid = e.prizeUid
			this.imgs = e.imgs
			this.price=e.price
			this.userIp = uni.getStorageSync('userIp') || ''
			console.log('aaaa',this.imgs);
		},
		mounted() {
			// #ifdef H5
			if (document.querySelector('.uni-placeholder')) {
				document.querySelector('.uni-placeholder').style.display = 'none';
			}
			if (document.querySelector('.uni-page-head')) {
				document.querySelector('.uni-page-head').style.display = 'none';
			}
			// #endif
			console.log('==当前h5是哪家==', this.$appName, this.$appNameDict[this.$appName]);
		},
		methods: {
			isWeixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true; // 微信中打开
				} else {
					return false;
				}
			},
			download(type) {
				let appleId = 'id6499086811';
				// #ifdef APP
				if (type == 'android') {
					// 跳转安卓应用市场
					let appurl = 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/Rich.apk';
					// let appurl = 'market://details?id=com.tencent.mm'; //这个是通用应用市场，如果想指定某个应用商店，需要单独查这个应用商店的包名或scheme及参数
					plus.runtime.openURL(appurl);
				} else {
					// 跳转AppStore
					let appStoreScheme = `itms-apps://itunes.apple.com/app/${appleId}`;
					plus.runtime.openURL(appStoreScheme, (res) => {
						uni.showToast({
							title: 'AppStore打开失败，请自行前往下载。',
							icon: 'none'
						});
					});
					// plus.runtime.launchApplication({
					//     action: appStoreScheme,
					//     function(e) {
					//         console.log('Open system default browser failed: ' + e.message);
					//     }
					// });
				}
				// #endif
				// #ifndef APP
				if (type === 'ios') {
					// let url = encodeURIComponent(`https://apps.apple.com/us/app/卡神购-先享后付/${appleId}`);
					console.log('=点击了下载苹果的=当前h5是哪家==', this.$appName, this.$appNameDict[this.$appName], this.iosLink[this
						.$appName]);
					let iosToLink = this.iosLink[this.$appName];
					window.location.href = iosToLink;
					if (this.isWeixin()) {
						this.isWeixinBrowser = true;
					}
				} else {
					console.log('=点击了下载安卓的=当前h5是哪家==', this.$appName, this.$appNameDict[this.$appName], this.androidLink[
						this.$appName]);
					let androidToLink = this.androidLink[this.$appName];
					window.location.href = androidToLink;
					if (this.isWeixin()) {
						this.isWeixinBrowser = true;
					}
				}
				// #endif
			},
			handelConfirmButton() {
				// 点击确认按钮点击事件
				let osName = plus.os.name;
				if (osName.toLowerCase() == 'ios') {
					let appleId = 'id6499086811';
					let appStoreScheme = `itms-apps://itunes.apple.com/app/${appleId}`;
					plus.runtime.openURL(appStoreScheme, (res) => {
						uni.showToast({
							icon: 'none',
							title: 'AppStore打开失败，请自行前往下载。'
						});
					});
				} else {
					// 安卓直接打开应用宝的URL
					plus.runtime.openURL('https://a.app.qq.com/o/simple.jsp?pkgname=com.zhanxiongdj&fromcase=40003');
				}
			},
			//帮好友助力
			helpFriendCut() {
				console.log('111');
				if (!getUserId()) {
					this.$goLogin();
					return;
				}
				uni.showLoading({
					title: "拼命帮砍中"
				})
				this.$request(
					'apiActivityPrize/helpGetPrize', {
						// prizeUid: '28e86b182e7fcba67a2c06dc5b85246cb2dd4773dp7tx9sd4xki',
						// uid: '073bab35a7ea65750aa758787f2a149892ff72d62xupe1gz6v06',
						prizeId: this.prizeId,
						reqIp: this.userIp,
						prizeUid: this.prizeUid,
						uid: getUserId()
					},
					'post',
					false,
					true
				).then((res) => {
					uni.hideLoading()
					if (res.businessSuccess || res.success) {
						this.fireworkSta = true
						this.helpKanPrice = res.data.kanPrice || 0
						if (this.helpKanPrice) {
							this.popText = `帮踢了${this.helpKanPrice}元`
						}
						this.isShowDownSta=true
					} else {
						this.isShowDownSta=true
						uni.showToast({
							title: res.msg || res.message,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			toCutDetailPage() {
				uni.showToast({
					title: '点击下方按钮，下载app即可参与',
					icon: 'none',
					duration: 4000
				});
			},
			quxiaoShare() {
				this.fireworkSta = false
			},
		}
	};
</script>

<style lang="less" scoped>
	.contanier {
		position: relative;
		height: 100vh;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100%;
		background-color: #fff;

		.fire {
			position: fixed;
			top: 50%;
			left: 50%;
			border-radius: 10px;
			margin-left: -300rpx;
			margin-top: -350rpx;
			width: 600rpx;
			height: 700rpx;


			.new_img {
				width: 600rpx;
				height: 700rpx;
			}

			.quxiao {
				position: absolute;
				bottom: 40rpx;
				left: 50%;
				transform: translateX(-50%);
			}

			.cut_price {
				position: absolute;
				top: 54%;
				left: 50%;
				transform: translateX(-50%);
				letter-spacing: 0.05em;
				font-size: 46rpx;
				font-weight: bolder;
				white-space: nowrap;
				color: #f9daa3;
				z-index: 999999;
			}

			.cut_price::before {
				content: attr(text);
				position: absolute;
				z-index: -1;
				text-shadow: 1px 5px 0px #ff0307;
			}
		}

		.button {
			position: absolute;
			bottom: 9vh;
			width: 100%;
			display: flex;
			// padding-top: 40%;
			justify-content: space-around;

			.u-btn {
				border-radius: 20rpx;
				color: #ffffff;
				border-color: #da0000;
				border: 0 solid;
				background-color: #fff;
				background-image: linear-gradient(to right, #f9c082, #be9263, #8c6c49);

				.u-icon {
					margin-right: 10rpx;
				}
			}
		}
		.logo{
			position: absolute;
			left: 0;
			top: 0;
			width: 100rpx;
			height: 100rpx;
		}

		.top {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			padding-top: 100rpx;

			.text {
				margin-top: 20rpx;
				color: #a3a3a3;
				display: flex;
				flex-direction: column;
				align-items: center;

				.text1 {
					display: inline-block;
					margin: 10rpx 0;
				}
			}

			.imgs {

				// bottom: 28vh;
				width: 500rpx;
				height: 500rpx;
				text-align: center;
			}

			.helpCut {
				width: 500rpx;
				background-image: linear-gradient(to right, #f9c082, #be9263, #8c6c49);
				line-height: 80rpx;
				height: 80rpx;
				animation: btnshake1 1.8s linear infinite;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 80rpx;
				margin-top: 50rpx;

				.img_foot {}

				.ti {
					color: #ffffff;
					letter-spacing: 0.1em;
				}
			}

		}



		@keyframes btnshake1 {
			0% {
				transform: scale(1);
				/*开始为原始大小*/
			}

			25% {
				transform: scale(1.15);
			}

			50% {
				transform: scale(1);
			}

			75% {
				transform: scale(1.15);
			}

			100% {
				transform: scale(1);
			}
		}

		&.contanier-rich {
			// background-image: url(@/static/tenant/rich/download_bkg.png);
			background-color: #fff4e6;
		}

		&.contanier-default-open {
			&::after {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 100%;
				width: 100%;
				background-color: rgba(0, 0, 0, 0.7);
				z-index: 5;
				content: '';
			}

			&::before {
				position: absolute;
				right: 35rpx;
				top: -15rpx;
				content: '';
				background: url('../../pages/download-rich/open.png') center/contain no-repeat;
				width: 200rpx;
				height: 150rpx;
				z-index: 6;
			}
		}
	}
</style>